<style>
    /* 工具箱容器 */
    .toolbox {
        position: fixed;
        top: 80px;
        right: 20px;
        z-index: 999;
    }

    /* 工具箱触发按钮 - 风暴特效 */
    .toolbox-trigger {
        width: 38px;  /* 减小按钮尺寸 */
        height: 38px;
        background: linear-gradient(135deg, #00c6fb, #005bea);
        border-radius: 50%;
        box-shadow: 0 2px 15px rgba(0, 98, 234, 0.3),
                   inset 0 2px 10px rgba(255, 255, 255, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        position: relative;
        overflow: hidden;
    }

    /* 闪电效果 */
    .toolbox-trigger::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, 
            transparent 45%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 55%);
        transform: translateX(-100%);
        animation: lightning 3s infinite;
    }

    @keyframes lightning {
        0% {
            transform: translateX(-100%) rotate(0deg);
            opacity: 0;
        }
        10%, 30% {
            opacity: 1;
        }
        100% {
            transform: translateX(100%) rotate(0deg);
            opacity: 0;
        }
    }

    .toolbox-trigger:hover {
        transform: scale(1.1) rotate(-5deg);
    }

    .toolbox-trigger i {
        font-size: 18px;  /* 减小图标尺寸 */
        color: #fff;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transition: all 0.3s;
    }

    /* 工具箱展开时的图标旋转 */
    .toolbox-trigger.active i {
        transform: rotate(135deg);
    }

    /* 工具箱面板 - 风暴主题 */
    .toolbox-panel {
        position: absolute;
        top: 45px;  /* 调整位置 */
        right: 0;
        width: 160px;  /* 减小面板宽度 */
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 98, 234, 0.2);
        padding: 6px 0;  /* 减小内边距 */
        display: none;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .toolbox-panel.show {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    /* 工具项样式 */
    .tool-item {
        padding: 8px 12px;  /* 减小内边距 */
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s;
        margin: 2px 4px;  /* 减小外边距 */
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.7);
    }

    .tool-item:hover {
        background: linear-gradient(135deg, #e0f7ff 0%, #e8f0ff 100%);
        transform: translateX(-4px);
    }

    .tool-item i {
        margin-right: 8px;
        font-size: 16px;  /* 减小图标尺寸 */
        color: #005bea;
    }

    .tool-item:hover i {
        transform: scale(1.1);  /* 减小悬停缩放 */
    }

    .tool-item span {
        font-size: 13px;  /* 减小文字尺寸 */
        color: #2c3e50;
    }

    /* 移动端适配 */
    @media screen and (max-width: 767px) {
    

        .toolbox-trigger {
            width: 35px;  /* 移动端更小的按钮 */
            height: 35px;
        }

        .toolbox-panel {
            width: 140px;  /* 移动端更小的面板 */
            top: auto;
        }

        .tool-item {
            padding: 6px 10px;  /* 移动端更小的内边距 */
        }
    }

    /* 适配刘海屏 */
    @supports (padding-top: env(safe-area-inset-top)) {
        /* .toolbox {
            top: calc(80px + env(safe-area-inset-top));
        } */
    }
</style>

<div class="toolbox">
    <!-- 触发按钮 -->
    <div class="toolbox-trigger" onclick="toggleToolbox()">
        <i class="layui-icon layui-icon-add-1"></i>
    </div>

    <!-- 工具箱面板 -->
    <div class="toolbox-panel" id="toolboxPanel">
        <!-- 一键到底部 -->
        <div class="tool-item" onclick="scrollToBottom()">
            <i class="layui-icon layui-icon-down"></i>
            <span>一键到底</span>
        </div>
       
    </div>
</div>

<script>
    // 工具箱展开/收起状态
    let isToolboxOpen = false;

    // 切换工具箱显示状态
    function toggleToolbox() {
        const trigger = document.querySelector('.toolbox-trigger');
        const panel = document.getElementById('toolboxPanel');
        
        isToolboxOpen = !isToolboxOpen;
        
        if (isToolboxOpen) {
            trigger.classList.add('active');
            panel.classList.add('show');
        } else {
            trigger.classList.remove('active');
            panel.classList.remove('show');
        }
    }

    // 点击外部关闭工具箱
    document.addEventListener('click', function(event) {
        const toolbox = document.querySelector('.toolbox');
        if (!toolbox.contains(event.target) && isToolboxOpen) {
            toggleToolbox();
        }
    });

    // 滚动到底部函数
    function scrollToBottom() {
        // 关闭工具箱面板
        toggleToolbox();
        
        // 平滑滚动到底部
        window.scrollTo({
            top: document.documentElement.scrollHeight,
            behavior: 'smooth'
        });
    }
</script>
